.item {
  display: flex;
  align-items: center;
  padding: 8px var(--mantine-spacing-sm);
  margin-top: 2pt;
  user-select: none;
  cursor: pointer;
  border-radius: var(--mantine-radius-md);

  &:hover {
    background-color: light-dark(var(--mantine-color-light-2), var(--mantine-color-dark-6));
  }

  &[data-active] {
    background-color: light-dark(var(--mantine-color-light-3), var(--mantine-color-dark-5));
  }

  &[data-disabled] {
    opacity: 0.4;
    pointer-events: none;
  }
}
